<!--
 * @Description: 
 * @Author: xuechengwu
 * @Email: 516385822@qq.com
 * @Date: 2021-11-23 14:32:30
 * @LastEditTime: 2022-02-08 16:07:01
 * @LastEditors: xuechengwu
-->
<template>
  <div class="page-config">
      <div class="page-config-header"><h5>页面设置</h5></div>
      <div class="xue-form-item page-config-group-item">
          <label class="label">名称</label>
          <div class="xue-form-item-input">
              <el-input
                placeholder="请输入页面名称"
                :value="page.name"
                size="mini"
                @input="(value) => update({
                    changes: [{
                        path: 'name',
                        value,
                    }]
                })"
            >
            </el-input>
          </div>
      </div>
      <div class="page-config-group-item">
          <interface-editor
            :page="page"
          />
      </div>
      <div class="page-config-group-item">
          <inner-state-editor
            :page="page"
          />
      </div>
  </div>
</template>

<script>

import InterfaceEditor from './InterfaceEditor.vue';
import InnerStateEditor from './InnerStateEditor.vue';
export default {
    components: {
        InterfaceEditor,
        InnerStateEditor,
    },
    props: {
        page: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            show: false,
            api: '',
            treeData: [],
            dataKey: '',
            name: '',
            queryData: '',
        };
    },
    methods: {
        update(data) {
            const { mark } = this.page;
            data.mark = mark;
            this.$store.commit('UPDATE_PAGE', data);
        },
        
    }
}
</script>

<style lang="less" scoped>

.page-config-group-item {
    position: relative;
    &::after {
        position: absolute;
        left: 0;
        bottom: -8px;
        content: ' ';
        width: 60%;
        height: 1px;
        display: inline-block;
        background: linear-gradient(to right, rgba(200, 200, 200, 1), rgba(200, 200, 200, 0.1));
    }
}

.response-content {
    height: 320px;
    overflow: auto;
}
.page-config {
    padding: 8px 12px;
    .page-source-btn {
        padding: 8px 12px;
        border: solid 1px #333;
        text-align: center;
    }
    .page-config-header {
        position: relative;
        padding-bottom: 12px;
        &::after {
            position: absolute;
            left: -12px;
            bottom: 0;
            content: ' ';
            width: 100%;
            height: 1px;
            display: inline-block;
            background: linear-gradient(to right, rgba(200, 200, 200, 1), rgba(200, 200, 200, 0.1));
        }
    }
}
</style>